<template>
    <view>
        <view class="top">
            <view class="shop-choose" @click="pullMenu()">
				<view style="display: flex;align-items: center;height: 100%;">
					<image class="shop-img" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/images/shopChoose.png"/>
					<text style="max-width: 280rpx;overflow: hidden;text-overflow: ellipsis;">{{ shopText? shopText:'请选择店铺' }}</text>
					<image style="width: 32rpx;height: 32rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_icon_Select.png"/>
				</view>
			</view>
            <view class="manage" @click="isShow=!isShow" :class="{'isshow':isShow}">{{isShow?'完成':'管理'}}</view>
            <picker mode=selector :range="list" @change="bindPickerChange" class="add">
				<image class="img" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/mov_icon_tjiafbai.png"/>添加
			</picker>
        </view>
        <view class="tab">
            <view class="tablan" :class="{'active':isChecked==0}" @click="checked(0)">文案</view>
            <view class="tablan" :class="{'active':isChecked==1}" @click="checked(1)">标题</view>
            <view class="tablan" :class="{'active':isChecked==2}" @click="checked(2)">话题</view>
        </view>
        <view class="content">
            <view v-if="isChecked==0">
				<view class="item" v-for="item,index in customCopy" :key="index">
                	<view class="item-top">
						<text class="title">文案{{ index+1 }}</text>
						<view class="title-right" v-if="isShow">
							<view class="edit" @click="editAll(item.id,index)">编辑</view>
							<view class="del" @click="delAll(item.id)">删除</view>
						</view>	
					</view>
                	<text>{{ item.content }}</text>
            	</view>	
			</view>
            <view v-if="isChecked==1">
				<view class="item" v-for="item,index in titleArr" :key="index">
                	<view class="item-top">
						<text class="title">标题{{ index+1 }}</text>
						<view class="title-right" v-if="isShow">
							<view class="edit" @click="editAll(item.id,index)">编辑</view>
							<view class="del" @click="delAll(item.id)">删除</view>
						</view>	
					</view>
                	<text >{{ item.titleName }}</text>
            	</view>	
			</view>
            <view v-if="isChecked==2">
				<view class="item" v-for="item,index in diyLabel" :key="index">
                	<view class="item-top">
						<text class="title">话题{{ index+1 }}</text>
						<view class="title-right" v-if="isShow">
							<view class="edit" @click="editAll(item.id,index)">编辑</view>
							<view class="del" @click="delAll(item.id)">删除</view>
						</view>	
					</view>
                	<text >{{ item.labelName }}</text>
            	</view>	
			</view>
        </view>
    </view>
    
    <uni-popup ref="popup1"  @change="popupChange">
		<view v-if="!shopArr.length" class="popup-content">
					<view class="text">
						<text style="font-size: 32rpx;font-weight: 700;">我的商家（{{shopArr.length}}）</text>
						<image @click="closePopup" style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"/>
					</view>
					<view class="popup-bottom">
						<view 
						class="popup-bottom-box"
						>
							<view class="popup-bottom-lift">
								<image style="width: 72rpx;height: 72rpx;margin-right: 20rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_dianpu@3x.png"/>
								<view>
									<p>创建店铺</p>
									<p class="try-text">发布爆款视频</p>
								</view>
							</view>
							<!-- <image @click="goToShop" style="width: 200rpx;height: 64rpx;" src="../../static/img/topUp@3x.png"/> -->
							<view class="right-btn" @click="goToShop">
								<text>创建店铺</text>
								<image class="arrow" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_icon_Activate.png"/>
							</view>
						</view>
						<view style="font-size: 24rpx; color: rgb(144,147,153);text-align: center;margin-top: 24rpx;margin-bottom: 24rpx;">没有更多数据了</view>
					</view>
					<view style="width: 100%;height: 720rpx0rpx;background-color: #fff;position: fixed;bottom: 0;left: 0;"></view>
				</view>
				<view v-else class="popup-content">
					<view class="text">
						<text style="font-size: 32rpx;font-weight: 700;">我的商家（{{shopArr.length}}）</text>
						<image @click="closePopup" style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"/>
					</view>
					<view class="popup-bottom1">
						
						<view style="height: 700rpx;">
						<radio-group @change="radioChange">
						<label class="popup-bottom-label" v-for="(item, index) in shopArr" :key="index" style="display: flex;" >
							<view>
								<radio color="rgba(142,84,244,1)" :value="index"/>
							</view>
							<view class="popup-bottom-lift">
								<image style="width: 72rpx;height: 72rpx;margin-right: 20rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/topUp1@3x.png"/>
								<view>
									<view style="display: flex;">
										<p style="max-width: 364rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.shopName}}</p>
										<image v-if="item.ka?item.ka.state==2:false" style="width: 87rpx;height: 28rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jcban.png" mode="" />
										<view v-else class="state" :class="{'expire':item.state!=2}" >已到期</view>
									</view>	
									<p class="try-text">创建于{{ timestamp2Time(item.createDate) }}</p>
								</view>
							</view>
						</label>
						<view style="font-size: 24rpx; color: rgb(144,147,153);text-align: center;margin-top: 24rpx; margin-bottom: 24rpx;">没有更多数据了</view>
						</radio-group>
							
						</view>
					
					</view>
					<view style="height: 329rpx;"></view>
					<view class="fixed">
						<button class="manageBtn" @click="manageBtn()">管理店铺</button>
						<button class="verifyBtn" @click="verifyBtn()">确认</button>
					</view>
				</view>
	</uni-popup>
	<uni-popup ref="popup" background-color="rgba(241,241,241,1)">
				<view class="popup-content1">
                    <text class="text1" v-if="isChecked == 0">自定义文案</text>
                    <text class="text1" v-if="isChecked == 1">自定义标题</text>
                    <text class="text1" v-if="isChecked == 2">自定义话题</text>
                    <input v-model="intValue" class="input1" type="text" placeholder="请输入自定义文案" v-if="isChecked == 0">
                    <input v-model="intValue" class="input1" type="text" placeholder="请输入自定义标题" v-if="isChecked == 1">
                    <input v-model="intValue" class="input1" type="text" placeholder="请输入自定义话题" v-if="isChecked == 2">
                </view>
                <view class="bottom">
                <button class="bottom-quxiao" @click="popupClose()">取消</button>
                <button class="bottom-queren" @click="addAll()">确认</button>
            </view>
	</uni-popup>
</template>

<script>
import { httpRequest } from '../../utils/http';
export default {
    name: 'UniPresetVueVite1Profile',

    data() {
        return {
            isChecked:0,
            list:['文案','标题','话题'],
            value:0,
            shopArr:uni.getStorageSync('shop'),
			shopId:0,
			index:0,
			customCopy:[],
			titleArr:[],
			diyLabel:[],
			shopText:'',
			intValue:'',
			isShow:false,
			id:0,
			flag:false
        };
    },
	onLoad(options) {
		this.shopArr = uni.getStorageSync('shop')
		this.shopText = uni.getStorageSync('shop')[this.index].shopName
		this.getCustom()
		this.getTitle()
		this.getDiyLabel()

	},
    methods: {
        checked(e){
            this.isChecked = e
        },
        bindPickerChange(e){
            this.isChecked = e.detail.value
			this.$refs.popup.open('bottom')
        },
        pullMenu(){
		if(!uni.getStorageSync('shop'))return uni.navigateTo({ url: '/pageC/index/shop' })
		this.$refs.popup1.open('bottom')
	},
    timestamp2Time (time){
	  // 使用Date对象将时间戳转换为日期对象
		const date = new Date(time);

		// 获取日期的各个部分，如年、月、日、时、分、秒
		const year = date.getFullYear(); // 年
		const month = date.getMonth() + 1; // 月 (注意月份从0开始，需要加1)
		const day = date.getDate(); // 日
		const hours = date.getHours(); // 时
		const minutes = date.getMinutes(); // 分
		const seconds = date.getSeconds(); // 秒

		// 构建日期字符串，例如：2022-10-08 14:30:00
		const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
		const ymdData = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`// 输出格式化后的日期字符串
		return ymdData
		 },
		 manageBtn(){
		console.log(this.shopArr);
		uni.navigateTo({ url: `/pageB/index/management?shopArr=${JSON.stringify(this.shopArr)}` })
	},
	verifyBtn(){
		this.shopText = this.shopArr[this.index].shopName
		uni.setStorageSync('index',this.index)
		this.shopId = this.shopArr[this.index].shopId
		this.$refs.popup1.close()
		console.log(this.shopId);
		this.getCustom()
		this.getTitle()
		this.getDiyLabel()
	},
	radioChange: function(evt) {
		console.log(evt.detail.value);
		this.index = evt.detail.value
	},
	//添加自定义文案
    async addCustom(){
        if(this.intValue.trim()=='') return uni.showToast({
            title: '文案不能为空',
        })
        const res = await httpRequest('/api/addDiyCopy','POST',{
            shopId:this.shopArr[this.index].shopId,
            content:this.intValue
        })
        this.getCustom()
		this.intValue = ''
        this.$refs.popup.close()
        
    },
    //获取自定义文案
    async getCustom(){
        const res = await httpRequest('/api/diyCopyListByShopId','POST',{shopId:this.shopArr[this.index].shopId})
        console.log('文案'+res);
        this.customCopy = res.data
        
    },
    //删除自定义文案
    async delCustom(id){
        const res = await httpRequest('/api/delDiyCopy','POST',{diyCopyId:id})
        console.log(res);
        this.getCustom()
    },
	async getTitle(){
        const res = await httpRequest('/api/getDiyTitle','POST',{shopId:this.shopArr[this.index].shopId})
        console.log(res);
        this.titleArr = res.data
    },
    async delTitle(id){
        const res = await httpRequest('/api/delDiyTitle','POST',{id})
        this.getTitle()
    },
    async addTitle(id){
		if(this.intValue.trim()=='') return uni.showToast({
            title: '标题不能为空',
        })
            const res = await httpRequest('/api/addDiyTitle','POST',{titleName:this.intValue,shopId:this.shopArr[this.index].shopId})
            this.getTitle()
			this.intValue = ''
            this.$refs.popup.close()
        
    },
    async editTitle(id,index) {
        const res =await uni.request({
                url: 'https://www.diandianyouke.cn:8081/api/editDiyTitle',
                data: {
                        id:this.id,
                        titleName:this.intValue,
                        shopId:this.shopArr[this.index].shopId
                        },
                header: {
                    'Content-Type': 'application/json',
                },
                method: 'POST'
            })
		this.getTitle()
		this.intValue = ''
        this.$refs.popup.close()
    },
	async getDiyLabel(){
            const res = await httpRequest('/api/getDiyLabel','POST',{shopId:this.shopArr[this.index].shopId})
            console.log(res);
            this.diyLabel = res.data
            
        },
        //新增自定义话题
        async addDiyLabel(){
			if(this.intValue.trim()=='') return uni.showToast({
            title: '话题不能为空',
        })
            const res = await httpRequest('/api/addDiyLabel','POST',{
                labelName:this.intValue,
                shopId:this.shopArr[this.index].shopId
            })
            this.getDiyLabel()
			this.intValue = ''
            this.$refs.popup.close()
        },
        //删除自定义话题
        async delDiyLabel(id){
           await httpRequest('/api/delDiyLabel','POST',{
                id:id
            })
            this.getDiyLabel()
        },
		async editLabel(id){
			const res =await uni.request({
                url: 'https://www.diandianyouke.cn:8081/api/editDiyLabel',
                data: {
                        id:this.id,
                        labelName:this.intValue,
                        shopId:this.shopArr[this.index].shopId
                        },
                header: {
                    'Content-Type': 'application/json',
                },
                method: 'POST'
            })
			this.getDiyLabel()
			this.intValue = ''
        	this.$refs.popup.close()

			
		},
		async editCustom(){
			const res =await uni.request({
                url: 'https://www.diandianyouke.cn:8081/api/editDiyCopy',
                data: {
                        id:this.id,
                        content:this.intValue,
                        shopId:this.shopArr[this.index].shopId
                        },
                header: {
                    'Content-Type': 'application/json',
                },
                method: 'POST'
            })
			this.getCustom()
			this.intValue = ''
        	this.$refs.popup.close()
		},
		addAll(){
			if(this.flag){
			if(this.isChecked==0) return this.editCustom()
			if(this.isChecked==1) return this.editTitle()
			if(this.isChecked==2) return this.editLabel()
			}else{
			if(this.isChecked==0) return this.addCustom()
			if(this.isChecked==1) return this.addTitle()
			if(this.isChecked==2) return this.addDiyLabel()
			}
			
		},
		editAll(id,index){
			this.$refs.popup.open('bottom')
        	this.flag = true
        	this.id = id
        	console.log(index);
        	
			
			if(this.isChecked==0) return this.intValue = this.customCopy[index].content
			if(this.isChecked==1) return this.intValue = this.titleArr[index].titleName
			if(this.isChecked==2) return this.intValue = this.diyLabel[index].labelName
		},
		delAll(id){
			if(this.isChecked==0) return this.delCustom(id)
			if(this.isChecked==1) return this.delTitle(id)
			if(this.isChecked==2) return this.delDiyLabel(id)
		}
    },
};
</script>

<style lang="scss" scoped>
.top{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 124rpx;
    padding: 0 24rpx;
    background-color: #fff;
    .manage{
        float: right;
        font-size: 28rpx;
        color: rgb(69,70,74);
        margin-right: 36rpx;
        transform: translateX(42rpx);
    }
    .add{
        float: right;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 162rpx;
        height: 64rpx;
        background-color: rgb(142,84,244);
        color: #fff;
        font-size: 30rpx;
        border-radius: 8rpx;
        .img{
            width: 24rpx;
            height: 24rpx;
            margin-right: 6rpx;
        }
    }
    .shop-choose{
		display: inline-block;
		box-sizing: border-box;
		max-width: 360rpx;
        height: 44rpx;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 60rpx;
		background-color: #fff;
		border-radius: 25rpx;
		font-size: 28rpx;
		  padding: 0 24rpx;
		  color: rgb(48,49,51);
          margin-left: 24rpx;
          margin-right: 82rpx;
	.shop-img{
		width: 32rpx;
		height: 32rpx;
		margin-right: 6rpx;
	}
	.pull-choose{
	position: absolute;
	top: 55rpx;
	left: 10rpx;
	width: 210rpx;
	background-color: #fff;
	z-index: 999;
	border-radius: 20rpx 20rpx 0 0;
	.pull-menu{
		width: 210rpx;
		height: 50rpx;
		text-align: center;
		line-height: 45rpx;
	}
}
}
}
.tab{
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 118rpx;
    background-color: #fff;
    .tablan{
        box-sizing: border-box;
        width: 64rpx;
        height: 100%;
        padding-top: 48rpx;
        font-size: 32rpx;
        color: rgb(144,147,153);
    }
}
.content{
    box-sizing: border-box;
    padding: 30rpx;
    .item{
        box-sizing: border-box;
        width: 100%;
        height: 208rpx;
        padding: 30rpx 24rpx;
        background-color: #fff;
        border-radius: 16rpx;
        font-size: 28rpx;
        color: rgb(69,70,74);
        margin-bottom: 24rpx;
		.item-top{
			display: flex;
			justify-content: space-between;
			.title{
            font-size: 32rpx;
            font-weight: 700;
            margin-bottom: 18rpx;

        }
		.title-right{
			display: flex;
			justify-content: space-between;
			width: 200rpx;
			height: 48rpx;
			.del{
				width: 88rpx;
				height: 48rpx;
				text-align: center;
				line-height: 48rpx;
				font-size: 24rpx;
				border-radius: 8rpx;
				color: rgb(255,55,71);
				background-color: rgba(255,55,71,0.05);
			}
			.edit{
				width: 88rpx;
				height: 48rpx;
				text-align: center;
				line-height: 48rpx;
				font-size: 24rpx;
				color: rgb(69,70,74);
				border-radius: 8rpx;
				background-color: rgb(241,241,241);
			}
		}
		}
        
    }
}
.popup-content {
		height: 1000rpx;
		background-color: rgb(241,241,241);
		border-radius: 32rpx 32rpx 0 0 !important;
		
		.text{
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 108rpx;
			width: 100%;
			border-bottom: 1px solid rgba(220,223,230,1);
			padding: 30rpx;
			color: rgb(48,49,51);
		}
		.fixed{
			display: flex;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 0;
			height: 147rpx;
			width: 100%;
			border-top: 1rpx solid #e5e7ec;
			background-color: #fff;
			padding-top: 6rpx;

			.verifyBtn{
				width: 336rpx;
				height: 86rpx;
				background-color: #8e54f4;
				color: #fff;
				text-align: center;
				line-height: 86rpx;
				font-size: 30rpx;
				margin: 0;
    			margin-left: 18rpx;
			}
			.manageBtn{
				width: 336rpx;
				height: 84rpx;
				border: 1px solid #8e54f4;
				color: #8e54f4;
				text-align: center;
				line-height: 84rpx;
				font-size: 30rpx;
				margin: 0;
			}
		}
		.popup-bottom1{
			overflow-y: scroll;
			height: 787rpx;
			padding-left: 30rpx;
			padding-top: 6rpx;
			padding-right: 30rpx;
			.popup-bottom-label{
				display: flex;
				align-items: center;
				// width: 686rpx;
				height: 126rpx;
				margin-top: 24rpx;
				
				.popup-bottom-lift{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: rgba(48,49,51,1);
					font-weight: 700;
					width: 614rpx;
    				height: 126rpx;
    				background-color: #fff;
    				border-radius: 16rpx;
    				padding-left: 30rpx;
					margin-left: 24rpx;
					.try-text{
						font-size: 24rpx;
						color: rgb(144,147,153);
						font-weight: normal;
					}
					
				}
				}
			}
		.popup-bottom{
			overflow-y: scroll;
			height: 787rpx;
			padding-left: 30rpx;
			.popup-bottom-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 686rpx;
				height: 126rpx;
				margin-top: 20rpx;
				
				.popup-bottom-lift{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: rgba(48,49,51,1);
					font-weight: 700;
						.try-text{
						font-size: 24rpx;
						color: rgb(144,147,153);
						font-weight: normal;
					}
					
				}
			}

		}
		}
.active{
    font-weight: 700;
    color: rgb(142,84,244) !important;
    border-bottom: 4rpx solid rgb(142,84,244);
}
.state{
		width: 80rpx;
		height: 40rpx;
		color: rgb(58,224,125);
		border: 2rpx solid rgb(58,224,125);
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
		margin-left: 12rpx;
		border-radius: 4rpx;
	}
	.expire{
		color: rgb(255,55,71) !important;
		border: 2rpx solid rgb(255,55,71) !important;
	}

	.popup-content1{
    height: 648rpx;
    padding: 24rpx 32rpx;
    .text1{
        font-size: 32rpx;
        height: 96rpx;
        font-weight: 700;
    }
    .input1{
        margin-top: 50rpx;
        background-color: #fff;
        height: 170rpx;
        width: 100%;
        border-radius: 16rpx;
    }
}
.bottom{
    position: fixed;
    bottom: 34rpx;
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .bottom-quxiao{
    width: 330rpx;
    height: 86rpx;
    text-align: center;
    line-height: 88rpx;
    color: rgba(142,84,244,1);
    border: 1px solid rgba(142,84,244,1);
}
.bottom-queren{
    width: 332rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    background-color: rgba(142,84,244,1);
    color: #fff;
    margin-right: 30rpx;
}
    }
	.isshow{
		color: rgb(255,55,71) !important;
	}
</style>